import { List, Skeleton, Tag } from 'antd';
import React, { Component } from 'react'
import Article from '../../types/Article'
import moment from 'moment';
import {
    ClockCircleOutlined,
    FundViewOutlined,
    TagOutlined
} from '@ant-design/icons';
import './BlogList.less';
import { Link } from 'react-router-dom';
import Loading from '../Loading';

interface IProps {
    articles: Article[];
    loading: boolean;
}
interface IState {
    cateColors: string[]
}
export default class BlogList extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            cateColors: ['cyan', 'magenta', 'blue', 'purple', 'geekblue', 'red', 'volcano', 'orange', 'gold']
        }
    }

    render() {
        const { loading, articles } = this.props;
        const { cateColors } = this.state;
        return (
            <List
                className="bloglist"
                loading={{
                    size: 'large',
                    indicator: <Loading />,
                    spinning: loading,
                }}
                itemLayout="horizontal"
                dataSource={articles}
                renderItem={item => (
                    <div className='blogListItemContainer'>
                        <List.Item  >
                            <Skeleton active title={false} loading={loading}>
                                <List.Item.Meta
                                    title={
                                        <Link to={`/article/${item.articleID}`}>
                                            <>
                                                <h1>{item.title}</h1>
                                                <div className='articleTags'>
                                                    <Tag title="最后修改日期" color="blue" icon={<ClockCircleOutlined />}>{moment(item.time).format('YYYY-MM-DD')}</Tag>
                                                    <Tag title="浏览量" color="red" icon={<FundViewOutlined />}>{item.views}</Tag>
                                                    <Tag title="分类" color={cateColors[(item.cate.cateID - 1) % cateColors.length]} icon={<TagOutlined />}>{item.cate.cateName}</Tag>
                                                </div>
                                            </>
                                        </Link>
                                    }
                                    description={item.content}
                                />

                            </Skeleton>
                        </List.Item>
                    </div>
                )}
            />
        )
    }
}
